<template>
    <div>
        <div>
            <h2>订单管理</h2>
        </div>

        <div>
            <h3>订单列表</h3>
            <table border="1">
                <thead>
                <tr>
                    <th>订单ID</th>
                    <th>用户ID</th>
                    <th>实付金额</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="order in orders" :key="order.orderId">
                    <td>{{ order.orderId }}</td>
                    <td>{{ order.userId }}</td>
                    <td>{{ order.payment }}</td>
                    <td>{{ order.status }}</td>
                    <td>
                        <button @click="editOrder(order.orderId)">编辑</button>
                        <button @click="deleteOrder(order.orderId)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 添加/修改订单 -->
        <div v-if="showModal" class="modal">
            <h3>{{ isEditMode ? '修改订单' : '添加订单' }}</h3>
            <form @submit.prevent="saveOrder">
                <div>
                    <label for="userId">用户ID</label>
                    <input v-model="orderForm.userId" id="userId" type="text" required />
                </div>
                <div>
                    <label for="payment">实付金额</label>
                    <input v-model="orderForm.payment" id="payment" type="number" required />
                </div>
                <div>
                    <label for="status">订单状态</label>
                    <select v-model="orderForm.status" id="status" required>
                        <option value="1">未付款</option>
                        <option value="2">已付款</option>
                        <option value="3">未发货</option>
                        <option value="4">已发货</option>
                        <option value="5">交易成功</option>
                        <option value="6">交易关闭</option>
                        <option value="7">待评价</option>
                    </select>
                </div>
                <div>
                    <button type="submit">{{ isEditMode ? '保存修改' : '创建订单' }}</button>
                    <button type="button" @click="closeModal">取消</button>
                </div>
            </form>
        </div>

        <!-- 加载中 -->
        <div v-if="loading" class="spinner">
            <p>加载中...</p>
        </div>
    </div>
</template>

<script>
    import OrderApi from '@/api/OrderApi';

    export default {
        data() {
            return {
                orders: [], // 存储订单列表
                loading: false, // 是否显示加载状态
                showModal: false, // 是否显示模态框
                isEditMode: false, // 是否为编辑模式
                orderForm: {
                    orderId: null, // 订单ID
                    userId: '', // 用户ID
                    payment: 0, // 实付金额
                    status: '1', // 订单状态
                },
            };
        },
        mounted() {
            this.fetchOrders();
        },
        methods: {
            // 获取订单列表
            async fetchOrders() {
                this.loading = true; // 显示加载中状态
                try {
                    // 调用 OrderApi 的 fetchOrders 方法获取订单列表
                    this.orders = await OrderApi.fetchOrders();
                } catch (error) {
                    console.error('获取订单时出错:', error); // 错误处理
                } finally {
                    this.loading = false; // 结束加载状态
                }
            },

            // 打开模态框进入创建订单模式
            createOrder() {
                this.resetForm(); // 重置表单
                this.isEditMode = false; // 设置为创建模式
                this.showModal = true; // 显示模态框
            },

            // 进入编辑订单模式
            async editOrder(orderId) {
                this.loading = true; // 显示加载中状态
                try {

                    const orderDetails = await OrderApi.fetchOrderDetails(orderId);
                    this.orderForm = orderDetails; // 填充表单数据
                    this.isEditMode = true; // 设置为修改模式
                    this.showModal = true; // 显示模态框
                } catch (error) {
                    console.error('获取订单详情时出错:', error);
                } finally {
                    this.loading = false; // 结束加载状态
                }
            },

            // 关闭模态框
            closeModal() {
                this.showModal = false;
            },

            // 保存订单（创建或更新）
            async saveOrder() {
                try {
                    if (this.isEditMode) {
                        // 如果是修改，则更新订单
                        await OrderApi.updateOrder(this.orderForm.orderId, this.orderForm);
                        this.fetchOrders(); // 刷新订单列表
                        alert('订单更新成功');
                    } else {
                        // 如果是添加模式，则创建新订单
                        await OrderApi.createOrder(this.orderForm);
                        this.fetchOrders(); // 刷新订单列表
                        alert('订单创建成功');
                    }
                    this.closeModal();
                } catch (error) {
                    console.error('保存订单时出错:', error); // 错误处理
                    alert('操作失败'); // 提示操作失败
                }
            },

            // 删除订单
            async deleteOrder(orderId) {
                if (confirm('确定删除该订单吗？')) { // 确认删除
                    try {
                        // 调用 OrderApi 的 deleteOrder 方法删除订单
                        await OrderApi.deleteOrder(orderId);
                        this.fetchOrders(); // 刷新订单列表
                        alert('订单删除成功');
                    } catch (error) {
                        console.error('删除订单时出错:', error); // 错误处理
                        alert('删除失败'); // 提示删除失败
                    }
                }
            },

            // 重置表单数据
            resetForm() {
                this.orderForm = {
                    orderId: null, // 重置订单ID
                    userId: '', // 重置用户ID
                    payment: 0, // 重置实付金额
                    status: '1', // 重置订单状态
                };
            },
        },
    };
</script>

<style scoped>
    /* 表格样式 */
    table {
        width: 100%;
        margin: 20px 0;
        border-collapse: collapse;
    }

    th, td {
        padding: 10px;
        text-align: center;
    }

    button {
        margin: 5px;
    }

    /* 模态框样式 */
    .modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        border: 1px solid #ccc;
        z-index: 1000;
    }

    /* 加载中样式设置 */
    .spinner {
        text-align: center;
        padding: 20px;
    }
</style>
